<template>
	<div id="cate_right">
		<div class="category_right">
			<div class="category_banner">
				<a href="javascript:void(0)">
					<img src="../assets/images/banner_1.png" alt="">
				</a>
			</div>
			<div class="category_detail">
				<!--<h3 class="category_n">热门种类商品</h3>-->
				<ul class="overflow_hidden">
					<li class="category_detail_item" v-for="item in mainDatas">
						<router-link :to="'/wx/detail/'+item.Id" class="category_detail_item_link">
							<img v-lazy="root + item.ImgPath" alt="" class="category_detail_item_pic">
							<p class="category_detail_item_name">{{item.ProductName}}</p>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		mounted() {
			this.getData()
		},
		data() {
			return {
				root: this.root,
				mainDatas: []
			}
		},
		watch: {
			$route(to) {
				console.log('to', to);
				var reg = /category\/\d+/;
				if(reg.test(to.path)) {
					var categotyId = this.$route.params.id || 0;
					console.log('categotyId', categotyId);
					this.fetchData(categotyId);
				}
			}
		},
		methods: {
			fetchData(id) {
				var _this = this;
				console.log('id', id)
				_this.$http.get('/Client/Categories/' + id, null, localStorage.Authorization, res => {
					_this.mainDatas = res.data;
					console.log('右边分类res', res)
				})
			},
			getData() {
				let _this = this;
				_this.$http.get('/Client/Products', null, localStorage.Authorization, res => {
					console.log('商品列表res', res)
					if(res.code === 101){
						
					}else{
						_this.mainDatas = res.data.list;
					}
				})
			}
		}
	}
</script>